<template>
	<swiper :options="swiperOption" class="swiper">
	    <swiper-slide v-for="icons of page" :key="icons.index">
	    	<div  v-for="item of icons" :key="item.id"  class="icons" >
	    		<div class="img">
		    		<img :src="item.url" alt="">
	    		</div>
		    	<p>{{item.title}}</p>
	    	</div>
	    </swiper-slide>
	    <div class="swiper-pagination"  slot="pagination"></div>
	  </swiper>
</template>
<script>
 export default {
    name: 'carrousel',
    props:["iconsList"],
    data() {
      return {
        swiperOption: {
         pagination: {
            el: '.swiper-pagination'
          },
          loop:true
        }
        // "iconsList":[
        // 	{
        // 		id:"01",
        // 		title:"景点门票",
        // 		url:require("./../../../data/img/icons/01.png")
        // 	},
        // 	{
        // 		id:"02",
        // 		title:"景点门票",
        // 		url:require("./../../../data/img/icons/02.png")
        // 	},
        // 	{
        // 		id:"03",
        // 		title:"景点门票",
        // 		url:require("./../../../data/img/icons/03.png")
        // 	},
        // 	{
        // 		id:"04",
        // 		title:"景点门票",
        // 		url:require("./../../../data/img/icons/04.png")
        // 	},
        // 	{
        // 		id:"05",
        // 		title:"景点门票",
        // 		url:require("./../../../data/img/icons/05.png")
        // 	},
        // 	{
        // 		id:"06",
        // 		title:"景点门票",
        // 		url:require("./../../../data/img/icons/01.png")
        // 	},
        // 	{
        // 		id:"07",
        // 		title:"景点门票",
        // 		url:require("./../../../data/img/icons/01.png")
        // 	},
        // 	{
        // 		id:"08",
        // 		title:"景点门票",
        // 		url:require("./../../../data/img/icons/01.png")
        // 	},
        // 	{
        // 		id:"09",
        // 		title:"景点门票",
        // 		url:require("./../../../data/img/icons/02.png")
        // 	},
        // 	{
        // 		id:"10",
        // 		title:"景点门票",
        // 		url:require("./../../../data/img/icons/02.png")
        // 	}
        // ]
      }
    },
    computed:{
    	page(){
    		let pages=[];
    		this.iconsList.forEach((item,index)=>{
    			let idx = Math.floor(index/8);
    			if(!pages[idx]) pages[idx]=[];
    			pages[idx].push(item);
    		})
    		return pages;
    	}
    }
  }
</script>
</script>
<style scoped>
  .swiper{
    width: 100%;
    height: 4.2rem;
    overflow:hidden;
  }
  .swiper .icons{
    width: 25%;
    height: 1.5rem;
    float:left;
    padding-top: .2rem;
    text-align: center;
  }
  .swiper .icons .img{
  	display: inline-block;
  	width: 1.1rem;
  	height: 1.1rem;
  }
  .swiper .icons .img img{
  	width: 100%;
  	height: 100%;
  }
  .swiper .icons p{
  	font-size: 0.28rem;
  }
</style>